<template>
  <el-row :gutter="10">
    <el-col :span="24">
<!--      <el-card class="layout-query">-->
        <el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
          <el-form-item prop="imei">
            <el-input v-model="state.queryForm.key" placeholder=""></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="Search" type="primary" @click="getDataList()">查询</el-button>
          </el-form-item>
        </el-form>
<!--      </el-card>-->

      <el-card>
        <!--        <el-space>-->
        <!--          <el-space>-->
        <!--            <el-button v-auth="'gps:device:save'" icon="Plus" type="primary" @click="addOrUpdateHandle()"-->
        <!--            >新增</el-button-->
        <!--            >-->
        <!--          </el-space>-->
        <!--          <el-space>-->
        <!--            <el-button v-auth="'gps:device:delete'" icon="Delete" plain type="danger" @click="deleteBatchHandle()">批量删除</el-button>-->
        <!--          </el-space>-->
        <!--          <el-space>-->
        <!--            <el-button v-auth="'biz:car:save'" icon="Plus" type="primary" @click="bulkTransfers()">批量转移</el-button>-->
        <!--          </el-space>-->
        <!--          <el-space>-->
        <!--            <el-button  icon="Plus" type="primary" @click="dialog()">过期设备充值</el-button>-->
        <!--          </el-space>-->
        <!--          <el-space>-->
        <!--            <el-button icon="Plus" type="primary" @click="dialog()">SIM充值</el-button>-->
        <!--          </el-space>-->
        <!--          <el-space>-->
        <!--            <el-button v-auth="'biz:car:save'" icon="Plus" type="primary" @click="disposition()" v-if="userStore.user.superAdmin===1">设备年费配置</el-button>-->
        <!--          </el-space>-->
        <!--        </el-space>-->
        <el-table
          v-loading="state.dataListLoading"
          :data="state.dataList"
          border
          class="layout-table"
          @selection-change="selectionChangeHandle">
          <!--          <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>-->
          <el-table-column prop="id" label="流水订单号" header-align="center" align="center"></el-table-column>
          <el-table-column prop="id" label="商户订单号" header-align="center" align="center"></el-table-column>
          <el-table-column prop="amount" label="支付金额" header-align="center" align="center"></el-table-column>
          <ma-dict-column prop="status" label="支付状态" dict-type="pay_type"></ma-dict-column>
          <ma-dict-column prop="channelId" label="支付渠道" dict-type=""></ma-dict-column>
          <el-table-column prop="clientIp" label="客户端IP" header-align="center" align="center"></el-table-column>
          <el-table-column prop="subject" label="商品标题" header-align="center" align="center"></el-table-column>
          <el-table-column prop="notifyCount" label="通知次数" header-align="center" align="center"></el-table-column>
          <el-table-column
            prop="lastNotifyTime"
            label="最后一次通知时间"
            header-align="center"
            align="center"></el-table-column>
          <el-table-column
            prop="paySuccTime"
            label="订单支付成功时间"
            header-align="center"
            align="center"></el-table-column>
        </el-table>
        <el-pagination
          :current-page="state.page"
          :page-sizes="state.pageSizes"
          :page-size="state.limit"
          :total="state.total"
          layout="total, sizes, prev, pager, next"
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle">
        </el-pagination>

        <!-- 弹窗, 新增 / 修改 -->
        <!--        <add-or-update ref="addOrUpdateRef" @refresh-data-list="getDataList"></add-or-update>-->
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { useCrud } from '@/hooks'
import { reactive, ref, markRaw } from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import AddOrUpdate from './add-or-update.vue'
import AddOrTransfer from '@/views/gps/device/add-or-transfer.vue'
import { deleteGrouping, getlistGroupingApi } from '@/api/gps/device'
import AddOrGrouping from '@/views/gps/device/add-or-grouping.vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/store/modules/user'
import OrgTree from '@/views/sys/user/org-tree.vue'
import MaDictColumn from '@/components/ma-dict/ma-dict-column/index.vue'
import { refundApi, useCommoditySubmitApi } from '@/api/gps/orders'
const state: IHooksOptions = reactive({
  dataListUrl: '/gps/pay/payOrderList',
  deleteUrl: '/gps/device',
  newParams: true,
  queryForm: {
    key: ''
  }
})

const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle, reset } =
  useCrud(state)
</script>
